$(function(){
    var aBtns = $("#banner ol li");
    var oUl = $("#banner ul");
    var aLis = oUl.find("li");

    var iNow = 0; //当前显示的图片的下标
    aBtns.click(function () {
        iNow = $(this).index();
        tab();
    })

    // 启动一个定时器
    var timer = null;
    timer = setInterval(function(){
        iNow++ ;
        tab();
    }, 2000)

    $("#banner").mouseenter(function(){
        clearInterval(timer);
    }).mouseleave(function(){
        timer = setInterval(function(){
            iNow++ ;
            tab();
        }, 2000)
    })

    function tab(){
        aBtns.attr("class", "")
            .eq(iNow).attr("class", "banner_active");
        if (iNow == aBtns.size()){
            aBtns.eq(0).attr("class", "banner_active");
        }
        oUl.animate({
            top: -420 * iNow
        }, 1000, function(){
            if(iNow == aBtns.size()){
                iNow = 0;
                oUl.css("top", 0)
            }
        })
    }
})